<template>
  <div class="zhaunti">
    <div v-for="(item) in pageListData" :key="item.id" class="box">
      <lazy-component loading="img/loading.cc698d35.gif">
        <img class="pic" v-lazy="item.item_pic_url" alt="" />
      </lazy-component>
      <div class="title">{{ item.title }}</div>
      <div class="tip">{{ item.subtitle }}</div>
      <div class="price">{{ item.price_info | filtermoney }}起</div>
    </div>
    <van-pagination
      v-model="currentPage"
      :total-items="totalPages"
      :items-per-page="items_per_page"
      :show-page-size="0"
    />
    <!-- <van-pagination
      v-model="currentPage"
      :items_per_page="items_per_page"
      :page-cuon="totalPages"
      mode="simple"
      chenge="chengeFn"
    /> -->
    <BackTop />
    <!-- {{brandList}} -->
  </div>
</template>

<script>
import BackTop from "@/components/BackTop";
import { mapGetters } from "vuex";
//import BackTop from '../../components/BackTop'
export default {
  name: "Topic",
  data() {
    return {
      currentPage: 1, //当前页
      // totalPages: 10, //10条数据
      items_per_page: 5, //每页显示5条
      lazyImg: require("@/images/loading.gif"),
    };
  },
  components: {
    BackTop,
  },
  mounted() {
    this.$store.dispatch("getHomeDB");
  },
  computed: {
    ...mapGetters([
      "brandList",
      "categoryList",
      "channel",
      "hotGoodsList",
      "newGoodsList",
      "topicList",
      "totalPages"
    ]),

    //分页数据
    pageListData() {
      return this.topicList.slice((this.currentPage-1)*this.items_per_page,this.currentPage*this.items_per_page);
    }
  },
  created() {
    if (localStorage.getItem("userToken")) {
    } else {
      this.$toast.loading({
        message: "请先登录...",
        forbidClick: true,
      });
      this.$store.commit("CHANGEISLOGINED", false);
      this.$router.push({
        path: "/user",
      });
    }
  }
};
</script>

<style lang="less" scoped>
.van-pagination__item {
  color: darkred;
}
.van-pagination__item--disabled {
  color: #333;
}
.van-pagination__page-desc {
  display: none;
}

.zhaunti {
  padding-bottom: 100px;
  .box {
    background-color: #fff;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 20px;
    .pic {
      width: 100%;
    }
    .title {
      font-size: 18px;
      margin: 10px 0;
    }
    .tip {
      font-size: 16px;
      margin: 20px 0;
      color: rgb(31, 31, 31);
      overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素显示的文本的行数 */
      -webkit-line-clamp: 1;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;
    }
    .price {
      color: rgb(155, 0, 0);
      margin-bottom: 10px;
    }
  }
}
/deep/.van-pagination__page-desc {
  display: none;
}
/deep/.van-pagination__item {
  color: darkred;
}
</style>